/*
 * @Description: 修改表单
 * @Author: Zzt
 * @Date: 2022-08-09 14:59:01
 * @LastEditTime: 2022-08-11 17:53:03
 */

import { Button, Form, Modal, Tabs } from 'antd';
import { useAppraisalAndDispositionContext } from '../../contexts/AppraisalAndDispositionContext';
import PlanRecord from './common/PlanRecord';
import Executive from './common/Executive';
import { FC, useEffect, useState } from 'react';
import { ICommonDialog } from '@/interfaces/global';

const { TabPane } = Tabs;
interface EditPlanProps extends ICommonDialog {
  data: any;
}
const EditPlan: FC<EditPlanProps> = (props) => {
  const { examineForm } = useAppraisalAndDispositionContext();
  const { visible, data, onClose } = props;
  console.log(data);
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      form.setFieldsValue(data);
      setActive('1');
    }
  }, [visible]);
  const onFinish = (values: any) => {
    examineForm({ ...data, ...values });
    form.resetFields();
    onClose();
    console.log(values);
  };

  const handleOk = () => {
    form.submit();
  };

  const handleCancel = () => {
    onClose();
  };
  /* 调整tab的选择 */
  const [active, setActive] = useState('1');
  const onChange = (value: any) => {
    console.log(value);
    setActive(value);
  };

  return (
    <Modal
      title="计划与执行记录"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      footer={[
        <Button key="back" onClick={handleCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={handleOk}>
          保存
        </Button>
      ]}
    >
      <Tabs activeKey={active} onChange={onChange}>
        <TabPane tab="计划记录" key="1">
          <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 20 }} onFinish={onFinish}>
            <PlanRecord form={form} />
          </Form>
        </TabPane>
        <TabPane tab="执行计划" key="2">
          <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 20 }} onFinish={onFinish}>
            <Executive form={form} />
          </Form>
        </TabPane>
      </Tabs>
    </Modal>
  );
};
export default EditPlan;
